<template>
  <div class="item-list">
    <span class="index">{{ data.rankNumber | formate }}</span>
    <img class="avatar" :src="data.face" alt="avatar">
    <span class="username">{{ data.username }}</span>
    <span class="complete-time">{{ data.recodeTimes }}</span>
  </div>
</template>

<script>
export default {
  name: 'ItemList',
  props: {
    data: Object
  },
  filters: {
    formate (val) {
      return val < 10 ? '0' + val : val
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  itemHeight = .7rem
  .item-list
    display flex
    height .7rem
    margin-top .21rem
    span
      line-height itemHeight
    .index
      font-size .3rem
      width 14%
      text-align center
    .avatar
      width itemHeight
      height itemHeight
      border-radius(50%)
    .username
      width 22%
      padding-left .1rem
      font-size .26rem
      text-align center
      ellipsis()
    .complete-time
      flex 1
      font-size .26rem
      padding-right .4rem
      text-align right
      ellipsis()
</style>
